<template>
	<view>
		<div class="zong">
			<carHeader :title="'活动发布'"></carHeader>
			<div class="body">
				<div class="bodyson">

					<uni-section>
						<view class="example">
							<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
								<uni-forms-item style="font-weight: 600;" label="标题:" name="title">
									<uni-easyinput style="font-weight: 200;" v-model="valiFormData.title" placeholder="请输入标题" />
								</uni-forms-item>
								<uni-forms-item style="font-weight: 600;" label="内容:" name="context">
									<uni-easyinput style="font-weight: 200;" type="textarea" v-model="valiFormData.context"
										placeholder="请输入内容" />
								</uni-forms-item>
								<div style="font-weight: 600;">图片/视频:</div>
								<div style="position: relative; top: -25px;left: 70px;">
									<u-upload
											v-model="valiFormData.image"
											:fileList="fileList1"
											@afterRead="afterRead"
											@delete="deletePic"
											name="1"
											multiple
											:maxCount="10"
										></u-upload>
									<!-- <uni-file-picker :image-styles="imageStyles" v-model="valiFormData.image"
										fileMediatype="image" mode="grid" @select="select" @progress="progress"
										@success="success" @fail="fail" /> -->
								</div>

							</uni-forms>
							<div>
								<navigator url="/pages/activityAnnounce/activityAnnounce">
									<button class="button1"  type="primary" @click="submit('valiForm')">发布</button>
								</navigator>
							</div>
						</view>
					</uni-section>


				</div>

			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				fileList1: [],
				list:{},
				imageStyles: {

					width: 150,
					height: 100,
					border: {
						// color:"#ff5a5f",
						width: 2,
						style: 'solid',
						radius: '5px'
					}
				},
				select(e) {
					console.log('选择文件：', e)
				},
				// 获取上传进度
				progress(e) {
					console.log('上传进度：', e)
				},

				// 上传成功
				success(e) {
					console.log('上传成功')
				},

				// 上传失败
				fail(e) {
					console.log('上传失败：', e)
				},





				// 校验表单数据
				valiFormData: {
					title: '',
					context: '',
					image: '',
					storeId:this.$global.shopId,
					publisher:''
					
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
				},
				// 自定义表单校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
				},

			}
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		created() {
			this.selectUserName();
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost:8080/file/upload', 
						// method:'POST',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.url)
							}, 1000);
							console.log(JSON.parse(res.data).data.url);
							this.valiFormData.image=JSON.parse(res.data).data.url;
						}
					});
				})
			},
			//查询发布者
			selectUserName(){
				uni.request({
					url: "http://localhost:8080/shop/activity/selectUserName",
					method: 'POST',
					// header: {
					// 	"Authorization": "Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImJmMzQ4YzRjLTEzNmMtNGIyOS1hZjY4LWViMzI5YTVjYzNiMCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.C2ALXJ99FQY03CVXw0dbOirfokIMIJv0TKEZwUKfpdn2QHoYuoTumQlnA54BBQeItgnEU8h3mkNJwd7ngKXG1g"
					// },
					data: {
						storeId: this.$global.shopId,
					},
					success:(res)=> {
						this.list = res.data.data;
						console.log(this.list)
						this.valiFormData.publisher=this.list.user.uName;
						console.log(this.valiFormData.publisher);
						this.isLoading = false; // 数据加载完成，更新加载状态 
					}
				})
			},
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			add() {
				this.dynamicLists.push({
					label: '域名',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			submit(ref) {
				uni.request({
					url: "http://localhost:8080/shop/activity/add",
					method: 'POST',
					data: {
						title: this.valiFormData.title,
						context: this.valiFormData.context,
						image: this.valiFormData.image,
						storeId:this.$global.shopId,
						publisher:this.valiFormData.publisher
					},
					success:(res)=> {
						this.list = res.data.data;
						console.log(this.list)
						
						this.isLoading = false; // 数据加载完成，更新加载状态 
					}
				})
				// this.$refs[ref].validate().then(res => {
				// 	console.log("---------------------")
				// 	console.log('success', res);
				// 	uni.showToast({
				// 		title: `活动发布成功`
				// 	})
				// }).catch(err => {
				// 	console.log('err', err);
				// })
			},
		}
	}
</script>

<style>
	.button1{
		border-radius: 30px;
		position: relative;
	/* 	top: 70px; */
	}
	.example {
		padding: 15px;
		background-color: #fff;
		/* 	border-radius: 20px; */
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}


	.example-body {
		padding: 10px;
		padding-top: 0;
	}










	.zong {
		background-color: #eeeeee;
		width: 100%;
		height: 670px;
	}

	.body {
		height: 800rpx;
		background-color: #ffffff;
		border-radius: 20px;
		width: 350px;
		margin: 0 auto;
		position: relative;
		top: -120px;
	}

	.bodyson {
		width: 320px;
		/* 	background-color: aqua; */
		height: 800rpx;
		margin: 0 auto;
	}
</style>